<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/animationEditor.css" type="text/css" />
    <STYLE>
        .svg_1new1 {
            animation: 5s ease 0s infinite normal none running svg_1new1;
            transform-origin: 420.5px 298.5px;
        }

        @keyframes svg_1new1 {
            0% {
                transform: translate(0px, 0px);
            }

            100% {
                transform: translate(500px, 0px);
            }
        }

        .svg_1new2 {
            animation: 5s ease 0s infinite normal none running svg_1new2;
            transform-origin: 420.5px 298.5px;
        }

        @keyframes svg_1new2 {
            0% {
                transform: translate(0px, 0px);
            }

            100% {
                transform: translate(200px, 0px);
            }
        }
    </STYLE>
</head>


<body>
    <label for="animationName">名称:</label> <input type="text" id="animationName">
    <table id='animationSetting'>
        <tbody>
            <tr>
                <td><label for="animationDuration">周期:</label></td>
                <td> <input type="text" id="animationDuration" style="width:60px"></td>
                <td><label for="animationDelay">延迟时间:</label></td>
                <td> <input type="text" id="animationDelay" style="width:60px"></td>
                <td><label for="animationCount">播放次数:</label></td>
                <td> <input type="text" id="animationCount"></td>
            </tr>
            <tr>
                <td>
                    <label for="animationTimeFuction">时间函数:</label></td>
                <td>
                    <select id='animationTimeFuction'>
                        <option value="linear">线性增长</option>
                        <option value="ease" selected>指数衰减</option>
                        <option value="ease-in">指数加速</option>
                        <option value='ease-in-out'>指数加减速</option>
                        <option value="ease-out">指数减速</option>
                    </select>
                </td>
                <td>
                    <label for="animationDirection">方向:</label></td>
                <td>
                    <select id='animationDirection'>
                        <option value="normal" selected>正向</option>
                        <option value="alternate">正反交替</option>
                        <option value='reverse'>反向</option>
                        <option value="alternate-reverse">反正交替</option>
                    </select>
                </td>
                <td>
                    <label for="animationFillMode">完成后状态:</label></td>
                <td>
                    <select id='animationDirection' style="width:70px;">
                        <option value="none" selected>恢复动画播放前状态</option>
                        <option value="forwards">保持最后状态</option>
                        <option value='backwards'>保持起始状态</option>
                        <option value="both">最后超始交替</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <fieldset id="pathSetting" style="margin-top:20px">
        <legend><input type="checkbox" />路径动画</legend>
        <input id="offsetPath" type="checkbox" />选择路径　　
        <label for="offsetAnchor">锚点:</label>
        <select id='offsetAnchor'>
            <option value="auto" selected>自动</option>
            <option value="top">顶端</option>
            <option value='bottom'>底端</option>
            <option value="left">左侧</option>
            <option value="right">右侧</option>
            <option value="center">中心</option>
            <option value="left top">左上</option>
            <option value="right top">右上</option>
            <option value="left bottom">左下</option>
            <option value="right bottom">右下</option>
        </select>　
        <label for="offsetRotate">角度:</label>
        <input list='offsetRotateList' id='offsetRotate'>
        <datalist id="offsetRotateList">
            <option value="auto" selected>自动</option>
            <option value="reverse">反向</option>
            <option value="auto 45deg">自动 90度</option>
            <option value="auto 90deg">左侧</option>
        </datalist>
        </select>
    </fieldset @>
    <svg width="600px" height="26">
        <line stroke-linecap="null" stroke-linejoin="null" id="svg_19" y2="3.09008" x2="575" y1="3.09008" x1="25"
            fill-opacity="null" stroke-opacity="null" stroke-dasharray="2,2" stroke-width="2" stroke="#000"
            fill="none" />
        <g stroke="null" id="svg_23">
            <text stroke="#00007f" xml:space="preserve" text-anchor="middle" font-family="Helvetica, Arial, sans-serif"
                font-size="10" id="svg_22" y="22.59729" x="575.4491" fill-opacity="null" stroke-opacity="null"
                stroke-dasharray="null" stroke-width="0" fill="#000000">100%</text>
            <path transform="rotate(180 575.437255859375,14.16727066040039) " stroke="#00007f" id="svg_21"
                d="m559.9999,5.85835l0,0c0,-1.17195 1.5839,-2.12201 3.53773,-2.12201l1.60806,0l0,0l7.71867,0l14.47251,0c0.93826,0 1.8381,0.22356 2.50155,0.62152c0.66345,0.39796 1.03617,0.9377 1.03617,1.50049l0,5.30505l0,0l0,3.18303l0,0c0,1.17196 -1.58389,2.12202 -3.53772,2.12202c-2.7077,0 -5.75287,0.04973 -8.46057,0.04973c-1.96347,1.95809 -2.79611,4.14254 -3.44053,8.08002c-0.37226,-2.08249 -1.00352,-6.63415 -3.25215,-8.00809l-8.64599,-0.12166c-1.95383,0 -3.53772,-0.95006 -3.53772,-2.12202l0,0l0,-3.18303l0,0l-0.00001,-5.30505z"
                fill-opacity="0" stroke-opacity="null" stroke-dasharray="null" stroke-width="null" fill="#fff" />
        </g>
        <g id="svg_27">
            <text stroke="#00007f" xml:space="preserve" text-anchor="middle" font-family="Helvetica, Arial, sans-serif"
                font-size="10" id="svg_25" y="22.59729" x="25.44917" fill-opacity="null" stroke-opacity="null"
                stroke-dasharray="null" stroke-width="0" fill="#000000">0%</text>
            <path transform="rotate(180 25.437334060668945,14.16727066040039) " stroke="#00007f" id="svg_24"
                d="m9.99998,5.85835l0,0c0,-1.17195 1.5839,-2.12201 3.53773,-2.12201l1.60806,0l0,0l7.71867,0l14.47251,0c0.93826,0 1.8381,0.22356 2.50155,0.62152c0.66345,0.39796 1.03617,0.9377 1.03617,1.50049l0,5.30505l0,0l0,3.18303l0,0c0,1.17196 -1.58389,2.12202 -3.53772,2.12202c-2.7077,0 -5.75287,0.04973 -8.46057,0.04973c-1.96347,1.95809 -2.79611,4.14254 -3.44053,8.08002c-0.37226,-2.08249 -1.00352,-6.63415 -3.25215,-8.00809l-8.64599,-0.12166c-1.95383,0 -3.53772,-0.95006 -3.53772,-2.12202l0,0l0,-3.18303l0,0l-0.00001,-5.30505z"
                fill-opacity="0" stroke-opacity="null" stroke-dasharray="null" stroke-width="null" fill="#fff" />

    </svg>
    <div style="border:1px solid black;overflow: hidden;">
        <div style="padding-right: 19px;position: relative; background-color:grey;">
            <table id="animationKeySet" cellspacing="0" cellpadding="0" border='0'>
                <thead>
                    <tr style="text-align:center">
                        <td width=30%>属性</td>
                        <td width=30%>值1</td>
                        <td width=30%>值2</td>
                    </tr>
                </thead>
            </table>
            <div style="position: absolute;left:0;top:0;border-bottom: 1px solid black;width:10000px;height:29px"></div>
        </div>
        <div style="height:200px;overflow-y:visible;overflow-y:scroll">
            <table id="animationKeySet" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td width=30%>
                            <select>
                                <option value="translate">位移</option>
                                <option value="rotate">角度</option>
                                <option value="stroke-dashoffset">画笔偏移</option>
                                <option value="offset-distance">路径偏移</option>
                                <option value="width">宽度</option>
                                <option value="height">高度</option>
                            </select>
                        </td>
                        <td width=30%>
                            <input type="text" name="" id="">
                        </td>
                        <td width=30%>
                            <input type="text" name="" id="">
                        </td>
                    </tr>

                </tbody>

            </table>
        </div>
    </div>
    <input id="ok" type="button" value="aaaa" style="float: left;margin-left: 30px;">
    <input id="ok" type="button" value="bbb" style="float: right;margin-right: 30px;">
</body>

</html>